<template>
  <div class="view">
    <el-row :gutter="10">
      <el-col :span="24"
        ><div class="header">
          <h2>{{ $t("dataBoard.dataTitle") }}</h2>
          <div class="leftimg"></div>
          <div class="rightimg"></div></div
      ></el-col>
    </el-row>
    <el-row :gutter="10" class="box">
      
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <!-- 渤海 -->
          <linegraph :id="'myEchart1'" :data="option1" class="edata" style="height:350px;width:auto;"></linegraph>
          <!-- 南海东部 -->
          <linegraph :id="'myEchart4'" :data="option4" class="edata" style="height:350px;margin-top: 10px"></linegraph>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-row :gutter="5" class="shownum">
            <h2>{{$t("dataBoard.wellDataTit")}}</h2>
            <div class="number">
            <el-col :span="4">
              <div>
                 {{ $t("dataBoard.welltxt3") }}
                <NumberGrow :value="numdata1"></NumberGrow>
              </div>
            </el-col>
            <el-col :span="4">
              <div>
                {{ $t("dataBoard.welltxt2") }}
                <NumberGrow :value="numdata2"></NumberGrow>
              </div>
            </el-col>
            <el-col :span="4">
              <div>
                {{ $t("dataBoard.welltxt1") }}
                <NumberGrow :value="numdata3"></NumberGrow>
              </div>
            </el-col>
            </div>
          </el-row>
          <!-- 总井口数据统计 -->
          <linegraph :id="'myEchart5'" :data="option5" class="sumdata" style="height:250px;"></linegraph>
          <div class="edata">
            <el-tabs v-model="activeName"  type="card" @tab-click="handleClick">
              <el-tab-pane v-for="item in tabs" :label="entab === 'cn' ? item.tabCN : item.tabEN" :name="item.tabCN" :key="item.name">
                <template>
                  <el-table 
                  :data="tableData"
                   size="mini" 
                   id="trdata"
                   max-height="260px"
                   :cell-style = "{fontSize:'12px',padding:'0'}"
                   :header-cell-style = "{fontSize:'12px'}"
                   >
                    <el-table-column prop="wellId" width="110" :label="$t('dataBoard.wellName')">
                    </el-table-column>
                    <el-table-column prop="platformName" width="110" :label="$t('dataBoard.platformName')">
                    </el-table-column>
                    <el-table-column prop="totDepth" :label="$t('dataBoard.totDepth')">
                    </el-table-column>
                    <el-table-column prop="tvdDepth" :label="$t('dataBoard.tvdDepth')">
                    </el-table-column>
                    <el-table-column prop="bitDepth" :label="$t('dataBoard.bitDepth')">
                    </el-table-column>
                    <el-table-column prop="wellState" :label="$t('public.wellState')">
                    </el-table-column>
                  </el-table>
                </template>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <!-- 东海 -->
          <linegraph :id="'myEchart2'" :data="option2" class="edata" style="height:350px;width:auto;"></linegraph>
          <!-- 南海西部 -->
          <linegraph :id="'myEchart3'" :data="option3" class="edata" style="height:350px;margin-top: 10px"></linegraph>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import linegraph from '@/components/component/Linegraph'  //echart子组件
import NumberGrow from "@/components/public/Numbergrow.vue";
export default {
  components:{
      linegraph,
      NumberGrow,
  },
  data() {
    return {
      numdata1:50,
      numdata2:50,
      numdata3:50,
      //渤海井数据
      option1:{
        title: {
          left: 10,
          text: "渤海作业信息",
          textStyle: {
            color: this.$store.state.theme == "dark" ? "#fff" : "#000",
          },
        },
        color: ["#2FC7C7", "#522FC7", "#00A2E8"], //图例颜色
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          right: 40,
          textStyle: {
            color: this.$store.state.theme == "dark" ? "#fff" : "#000",
          },
          data: ["勘探井", "开发井", "调整井"],
        },
        xAxis: {
          type: "category",
          axisLine: {
            //设置文字颜色
            lineStyle: {
              color: this.$store.state.theme == "dark" ? "#fff" : "#000",
            },
          },
          data: [],
        },
        yAxis: {
          type: "value",
          splitLine: {
            //设置网格线属性
            show: true,
            lineStyle: {
              color: ["#2E427C"],
              width: 1,
              type: "dotted",
            },
          },
          axisLine: {
            //设置文字颜色
            lineStyle: {
              color: this.$store.state.theme == "dark" ? "#fff" : "#000",
            },
          },
        },
        series: [
          {
            name: "勘探井",
            type: "bar",
            data: [],
          },
          {
            name: "开发井",
            type: "bar",
            data: [],
          },
          {
            name: "调整井",
            type: "bar",
            data: [],
          },
        ],
      },
      //东海井数据
      option2:{
        title: {
          left: 10,
          text: "东海作业信息",
          textStyle: {
            color: this.$store.state.theme == "dark" ? "#fff" : "#000",
          },
        },
        color: ["#2FC7C7", "#522FC7", "#00A2E8"], //图例颜色
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          right: 40,
          textStyle: {
            color: this.$store.state.theme == "dark" ? "#fff" : "#000",
          },
          data: ["勘探井", "开发井", "调整井"],
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: this.$store.state.theme == "dark" ? "#fff" : "#000",
            },
          },
          data: [],
        },
        yAxis: {
          type: "value",
          splitLine: {
            //设置网格线属性
            show: true,
            lineStyle: {
              color: ["#2E427C"],
              width: 1,
              type: "dotted",
            },
          },
          axisLine: {
            lineStyle: {
              color: this.$store.state.theme == "dark" ? "#fff" : "#000",
            },
          },
        },
        series: [
          {
            name: "勘探井",
            type: "line",
            data: [],
            smooth: 0.3, //波浪
            symbol: "none", //去掉折点形状
            areaStyle: {},
          },
          {
            name: "开发井",
            type: "line",
            data: [],
            smooth: 0.3, //波浪
            symbol: "none", //去掉折点形状
            areaStyle: {},
          },
          {
            name: "调整井",
            type: "line",
            data: [],
            smooth: 0.3, //波浪
            symbol: "none", //去掉折点形状
            areaStyle: {},
          },
        ],
      },
      //南海东部井数据
      option4:{
        title: {
          left: 10,
          text: "南海东部作业信息",
          textStyle: {
            color: this.$store.state.theme == "dark" ? "#fff" : "#000",
          },
        },
        color: ["#2FC7C7", "#522FC7", "#00A2E8"], //图例颜色
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          right: 40,
          textStyle: {
            color: this.$store.state.theme == "dark" ? "#fff" : "#000",
          },
          data: ["勘探井", "开发井", "调整井"],
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: this.$store.state.theme == "dark" ? "#fff" : "#000",
            },
          },
          data: [],
        },
        yAxis: {
          type: "value",
          splitLine: {
            //设置网格线属性
            show: true,
            lineStyle: {
              color: ["#2E427C"],
              width: 1,
              type: "dotted",
            },
          },
          axisLine: {
            lineStyle: {
              color: this.$store.state.theme == "dark" ? "#fff" : "#000",
            },
          },
        },
        series: [
          {
            name: "勘探井",
            type: "bar",
            data: [],
          },
          {
            name: "开发井",
            type: "bar",
            data: [],
          },
          {
            name: "调整井",
            type: "bar",
            data: [],
          },
        ],
      },
      //南海西部井数据
      option3:{
        title: {
          left: 10,
          text: "南海西部作业信息",
          textStyle: {
            color: this.$store.state.theme == "dark" ? "#fff" : "#000",
          },
        },
        color: ["#2FC7C7", "#522FC7", "#00A2E8"], //图例颜色
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          right: 40,
          textStyle: {
            color: this.$store.state.theme == "dark" ? "#fff" : "#000",
          },
          data: ["勘探井", "开发井", "调整井"],
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: this.$store.state.theme == "dark" ? "#fff" : "#000",
            },
          },
          data: [],
        },
        yAxis: {
          type: "value",
          splitLine: {
            //设置网格线属性
            show: true,
            lineStyle: {
              color: ["#2E427C"],
              width: 1,
              type: "dotted",
            },
          },
          axisLine: {
            lineStyle: {
              color: this.$store.state.theme == "dark" ? "#fff" : "#000",
            },
          },
        },
        series: [
          {
            name: "勘探井",
            type: "line",
            data: [],
            smooth: 0.3, //波浪
            symbol: "none", //去掉折点形状
            areaStyle: {},
          },
          {
            name: "开发井",
            type: "line",
            data: [],
            smooth: 0.3, //波浪
            symbol: "none", //去掉折点形状
            areaStyle: {},
          },
          {
            name: "调整井",
            type: "line",
            data: [],
            smooth: 0.3, //波浪
            symbol: "none", //去掉折点形状
            areaStyle: {},
          },
        ],
      },
      
      //总井数据统计
      option5:{
        title: {
          left: 10,
          text: "总井数据统计",
          textStyle: {
            color: this.$store.state.theme == "dark" ? "#fff" : "#000",
          },
        },
        color: ["#2FC7C7", "#522FC7", "#00A2E8"], //图例颜色
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          right: 40,
          textStyle: {
            color: this.$store.state.theme == "dark" ? "#fff" : "#000",
          },
          data: ["勘探井", "开发井", "调整井"],
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: this.$store.state.theme == "dark" ? "#fff" : "#000",
            },
          },
          data: [],
        },
        yAxis: {
          type: "value",
          splitLine: {
            //设置网格线属性
            show: true,
            lineStyle: {
              color: ["#2E427C"],
              width: 1,
              type: "dotted",
            },
          },
          axisLine: {
            lineStyle: {
              color: this.$store.state.theme == "dark" ? "#fff" : "#000",
            },
          },
        },
        series: [
          {
            name: "勘探井",
            type: "line",
            data: [],
            smooth: 0.3, //波浪
            symbol: "none", //去掉折点形状
          },
          {
            name: "开发井",
            type: "line",
            data: [],
            smooth: 0.3, //波浪
            symbol: "none", //去掉折点形状
          },
          {
            name: "调整井",
            type: "line",
            data: [],
            smooth: 0.3, //波浪
            symbol: "none", //去掉折点形状
          },
        ],
      },
      // 表格数据
      activeName: "渤海",
      idx: -1,
      entab:this.$store.state.language,
      tabs:[
        {
          tabCN:"渤海",
          tabEN:"Bohai Sea",
        },
        {
          tabCN:"东海",
          tabEN:"Donghai Sea",
        },
        {
          tabCN:"南海东部",
          tabEN:"Nanhai East",
        },
        {	
          tabCN:"南海西部",
          tabEN:"Nanhai West",
        },
      ],
      tableData: [],
    };
  },
  mounted() {
    this.NumGrow();
    this.getwelldata("渤海");
    this.initChart1()
    this.initChart2()
    this.initChart3()
    this.initChart4()
    this.initChart5()
  },
  
  methods: {
    //获取数组中的某一属性集合
    getAttrs(array,attr) {
      let arr = array.map((item)=>{
          return item[attr];
      })
      return arr;
    },
    //井口总数
    async NumGrow() {
      let res = await this.$api.bigShow.wellnum();
      if (res.code == 200) {
        this.numdata1 = res.data1;
        this.numdata2 = res.data2;
        this.numdata3 = res.data3;
      }
    },
    //渤海井数据
    async initChart1() {
      let res = await this.$api.bigShow.tjwell();
      if (res.code == 200) {
        this.option1.xAxis.data = this.getAttrs(res.data1,'years');
        this.option1.series[0].data = this.getAttrs(res.data1,'count');
        this.option1.series[1].data = this.getAttrs(res.data2,'count');
        this.option1.series[2].data = this.getAttrs(res.data3,'count');
      }
    },
    //东海井数据
    async initChart2() {
      let res = await this.$api.bigShow.shwell();
      if (res.code == 200) {
        this.option2.xAxis.data = this.getAttrs(res.data1,'years');
        this.option2.series[0].data = this.getAttrs(res.data1,'count');
        this.option2.series[1].data = this.getAttrs(res.data2,'count');
        this.option2.series[2].data = this.getAttrs(res.data3,'count');
      }
    },
    //南海东部井数据
    async initChart4() {
      let res = await this.$api.bigShow.szwell();
      if (res.code == 200) {
        this.option4.xAxis.data = this.getAttrs(res.data1,'years');
        this.option4.series[0].data = this.getAttrs(res.data1,'count');
        this.option4.series[1].data = this.getAttrs(res.data2,'count');
        this.option4.series[2].data = this.getAttrs(res.data3,'count');
      }
    },
    //南海西部井数据
    async initChart3() {
      let res = await this.$api.bigShow.zjwell();
      if (res.code == 200) {
        this.option3.xAxis.data = this.getAttrs(res.data1,'years');
        this.option3.series[0].data = this.getAttrs(res.data1,'count');
        this.option3.series[1].data = this.getAttrs(res.data2,'count');
        this.option3.series[2].data = this.getAttrs(res.data3,'count');
      }
    },
    
    //总井数据统计
    async initChart5() {
      let res = await this.$api.bigShow.totalwelldata();
      if (res.code == 200) {
        this.option5.xAxis.data = this.getAttrs(res.data1,'years');
        this.option5.series[0].data = this.getAttrs(res.data1,'count');
        this.option5.series[1].data = this.getAttrs(res.data2,'count');
        this.option5.series[2].data = this.getAttrs(res.data3,'count');
      }
    },
    //标签页获取数据
    async getwelldata(area) {
      let params = {
        area: area,
      };
      let res = await this.$api.bigShow.getwell(params);
      this.tableData = res.data;
    },

    handleClick(tab, event) {
      var tag = tab.name;
      this.getwelldata(tag);
    },
  },
   
};
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}

.header {
  width: 100%;
  height: 70px;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  color: white;
  background-image: url("../../assets/show1.png");
  background-repeat: no-repeat;
  background-size: 100% 70px;

  .leftimg {
    float: left;
    width: 32%;
    height: 30%;
    background-image: url("../../assets/show2.png");
    background-repeat: no-repeat;
    background-size: 100% 15px;
  }
  .rightimg {
    float: right;
    width: 32%;
    height: 30%;
    background-image: url("../../assets/show3.png");
    background-repeat: no-repeat;
    background-size: 100% 15px;
  }
}

.edata {
  height: 350px;
  padding: 30px 10px 0 10px;
  background-image: url("../../assets/border.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // /deep/ .el-tabs__content{
  //   transform : scale(0.83,0.83) !important;
  // }
  /deep/ table{
    width: 100% !important;
  }
  /deep/.el-table__body-wrapper::-webkit-scrollbar {
    width: 0px !important;
    height: 0;
  }
}

.sumdata {
  height: 250px;
  margin-bottom: 10px;
  padding: 30px 0 0 10px;
  background-image: url("../../assets/border.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.shownum {
  height: 85px;
  text-align: center;
  >h2{line-height: 35px;}
  .number{
    display: flex;
    justify-content: space-around;
  }
  .el-col {
    font-size: 16px;
    height: 50px;
    line-height: 25px;
    cursor: pointer;
    background-image: url("../../assets/center_num.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}

.grid-content {
  min-height: 36px;
}
</style>